<template>
  <div class="directorys-container">
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb
        separator="/subjects"
        separator-class="el-icon-arrow-right"
        style="padding: 18px 20px; padding: 0; margin-bottom: 20px"
        v-if="subjects.id && subjects.name"
      >
        <el-breadcrumb-item :to='{ path: "list" }'>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          subjects.id ? subjects.name : ''
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row>
        <!-- 目录 -->
        <el-form :inline="true" :model="dirForm" size="small" ref="dirForm">
          <el-col :span="18">
            <el-form-item
              label="目录名称"
              label-width="80px"
              prop="directoryName"
            >
              <el-input v-model="dirForm.directoryName"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="80px" prop="state">
              <el-select v-model="dirForm.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="clearDirForm">清除</el-button>
              <el-button type="primary" size="small" @click="searchDire"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-form-item>
              <el-button
                type="text"
                size="small"
                v-if="subjects.id && subjects.name"
                @click="$router.back()"
                ><i class="el-icon-back"></i>返回学科</el-button
              >
              <el-button type="success" size="small" @click="addNewDirectory"
                ><i class="el-icon-edit"></i>新增目录</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <!-- 数据条数 -->
      <el-alert
        :title="`数据一共 ${this.total} 条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 15px"
      ></el-alert>
      <!-- 表格 -->
      <el-table
        :data="list"
        style="width: 100%"
        :header-cell-style="headBgColor"
      >
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width="80"
        >
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
          :formatter="dateFormat"
        ></el-table-column>
        <el-table-column prop="totals" label="面试题数量"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            {{ row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="open(row)">{{
              row.state === 1 ? '禁用' : '启用'
            }}</el-button>
            <el-button
              type="text"
              @click="edit(row)"
              :disabled="row.state === 1"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="del(row.id)"
              :disabled="row.state === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="margin-top: 20px; text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="search.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="search.pagesize"
          :total="total"
          layout="sizes, prev, pager, next, jumper"
        >
          >
        </el-pagination>
      </div>
      <!-- 目录弹出框 -->
      <directorys-add
        :id="subjects.id"
        :show-dialog.sync="showDialog"
        :simpleList="simpleList"
        :addForm="addForm"
        @clearAddForm="clearAddForm"
        @getList="getList"
      ></directorys-add>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment'
import { list, remove, changeState, update } from '@/api/hmmm/directorys'

import { simple } from '@/api/hmmm/subjects'
import DirectorysAdd from '../components/directorys-add.vue'

export default {
  name: 'directorys',
  components: {
    DirectorysAdd
  },
  data () {
    return {
      dirForm: {
        directoryName: '',
        state: null
      },
      addForm: {
        subjectID: '',
        directoryName: ''
      },
      addRules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      count: '',
      list: [],
      total: 0,
      showDialog: false,
      simpleList: [],
      search: {
        page: 1,
        pagesize: 5,
        subjectID: this.$route.query.id
      }
      // EditList: [],
      // subjectList: [],
    }
  },
  computed: {
    subjects () {
      return this.$route.query || null
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取目录列表
    async getList () {
      // const obj = {
      //   page: this.search.page,
      //   pagesize: this.search.pagesize,
      //   subjectID: this.subjects.id
      // }
      // if (this.subjects.id && this.subjects.name) {
      const { data: res } = await list(this.search)
      this.total = res.counts
      this.list = res.items
      // } else {
      //   if (directoryName || state) {
      //     obj.directoryName = directoryName
      //     obj.state = state
      //   }

      // const { data: res } = await list(obj)

      // this.total = res.counts
      // this.list = res.items
    },
    // 搜索功能
    searchDire () {
      this.search.page = 1
      this.search.directoryName = this.dirForm.directoryName
      this.search.state = this.dirForm.state
      this.getList(this.search)
    },
    // 页面数的切换
    handleSizeChange (pagesize) {
      this.search.pagesize = pagesize

      // 调用列表
      this.getList(this.search)
    },
    // 页面切换
    handleCurrentChange (page) {
      this.search.page = page

      // 调用列表
      this.getList(this.search)
    },
    indexMethod (index) {
      return index + 1 + (this.search.page - 1) * this.search.pagesize
    },
    // 清空dialog的数据
    clearAddForm () {
      this.addForm = {
        subjectID: '',
        directoryName: ''
      }
    },

    // 清除目录名称，状态
    clearDirForm () {
      this.dirForm = {
        directoryName: '',
        state: null
      }
    },
    // 转换时间
    dateFormat (row, column) {
      const date = row[column.property]
      if (date === undefined) return ''
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },

    // table表单头部背景
    headBgColor () {
      return 'backgroundColor: #fafafa'
    },

    // 新增列表 获取学科简单列表
    async addNewDirectory () {
      this.showDialog = true
      const { data: res } = await simple()

      this.simpleList = res
    },
    // 删除目录数据
    async del (id) {
      try {
        await this.$confirm('此操作将永远删除该目录, 是否继续?', '提示', {
          type: 'warning'
        })
        await remove({ id })
        this.$message.success('删除数据成功')
        // 重新获取列表
        // this.getList()

        if (this.list.length === 1 && this.search.page > 1) {
          this.search.page--
          // 重新刷新获取列表
        }
        this.getList(this.search)
      } catch (err) {
        this.$message.error('取消删除')
      }
    },
    // 表单状态切换
    open (row) {
      const data = {
        id: row.id,
        state: row.state === 1 ? '0' : '1'
      }
      // 重新刷新获取列表
      this.change(data)
      this.$message.success('操作成功')
    },
    async change (data, state) {
      await changeState(data)
      this.getList(this.search)
    },
    // 修改目录
    async edit (row) {
      this.addForm = row
      // 显示弹框
      this.showDialog = true
      // 获取表单里面的数据
      const { config } = await update(row)
      this.addForm = JSON.parse(config.data)

      // this.search.subjectID = this.simpleList.subjectName

      // this.addForm.directoryName = this.simpleList.directoryName
      const { data } = await simple()

      this.simpleList = data
    }
  },
  watch: {
    $route () {
      this.addForm = {}
      this.search.page = 1
      this.search.subjectID = null
      this.getList()
    }
  }
  // 清空新增目录的数据
}
</script>

<style scoped lang="scss">
.directorys-container {
  background: #f0f2f5;
  padding: 10px;
}
::v-deep .el-breadcrumb__inner {
  color: #000;
}
</style>
